<template>
	<view class="content">
		<view class="group">
			<view class="group-header">
				<text class="group-header-title">晒宝标题*</text>
			</view>
			<view class="input-view">
				<textarea v-model="title" placeholder="请添加标题（30字以内）" />
			</view>
		</view>
		<view class="group">
			<view class="group-header">
				<text class="group-header-title">宝物简介*</text>
			</view>
			<view class="input-view">
				<textarea v-model="content" placeholder="请添加宝物简介" />
			</view>
		</view>
		<view class="group">
			<view class="group-header">
				<text class="group-header-title">上传图片*</text>
			</view>
			<view class="potho-view">
				<view class="potho-item" v-for="(item,index) in pothoArr" :key="index">
					<image class="potho" :src="item"></image>
					<image class="delete" @click="deletePotho(index)" src="../../../static/images/delete.png"></image>
				</view>
				<view class="potho-item addPotho" @click="addpotho">+</view>
			</view>
		</view>
		<view class="bottom-view">
			<view class="commint-btn" @click="commintAppoinment">提交审核</view>
		</view>
	</view>
</template>

<script>
	import {
		trendsPublishTreasure,
		trendsDetail
	} from '@/api/peopleHide.js'
	export default {
		data() {
			return {
				title: '',
				content: '',
				pothoArr: [],
				joinType: 1, //1 添加  2编辑
				id: '' //编辑id
			}
		},
		onLoad(options) {
			if (options.joinType) {
				// this.setData({
				// 	joinType: options.joinType
				// })
				this.joinType = options.joinType
			}
			if (options.id) {
				this.id = options.id
				this.trendsDetail()
			}
		},
		methods: {
			trendsDetail(){
			  trendsDetail({
				  id:this.id
			  }).then(res=>{
				  let objc = res.data
				  this.title = objc.title
				  this.content = objc.brief
				  this.pothoArr = objc.images_urls
			  })	
			},
			deletePotho(e) {
				let that = this
				uni.showModal({
					content: '删除该图片？',
					success(res) {
						if (res.confirm) {
							that.pothoArr.splice(e, 1)
						}
					}
				})

			},
			// addpotho() {
			// 	let that = this
			// 	uni.chooseImage({
			// 		count: 1,
			// 		success: (res) => {
			// 			let path = res.tempFilePaths[0]
			// 			that.pothoArr.push(path)

			// 			// console.log(path)
			// 		}
			// 	})
			// },
			addpotho: function(type) {
				let that = this;
				that.$util.uploadImageOne('upload/image', function(res) {
					that.pothoArr.push(res.data.url)

				});
			},
			commintAppoinment() {
				this.trendsPublishTreasure()
			},
			trendsPublishTreasure() {
				let pamaDIct = {
					title: this.title,
					brief: this.content,
					images_urls: this.pothoArr.join(',')
				}
				if (this.id != '') {
					pamaDIct.id = this.id
				}
				trendsPublishTreasure(pamaDIct).then(res => {
					uni.showModal({
						title: '提示',
						content: this.id != '' ? '编辑成功' : '晒宝提交成功!',
						showCancel: false,
						success(res) {
							uni.navigateBack()
						}
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		padding-bottom: 114upx;
	}

	.group {
		background-color: #fff;
		width: 100%;
		margin-bottom: 20upx;
		display: flex;
		flex-direction: column;

		.group-header {
			display: flex;
			align-items: center;
			position: relative;
			width: 100%;
			height: 80upx;

			.group-header-title {
				color: #333;
				font-size: 28upx;
				font-weight: 400;
				margin-left: 30upx;
			}
		}

		.group-header:after {
			position: absolute;
			content: '';
			left: 0;
			width: 8upx;
			height: 40upx;
			background-color: #0A77DE;
		}

	}

	.input-view {
		margin-top: 32upx !important;
		width: 690upx;
		height: 140upx;
		padding: 30upx;
		box-sizing: border-box;
		overflow: hidden;
		background-color: #F9F9F9;
		margin: 0 auto 32upx;
	}

	.potho-view {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		// height: 100upx;
		padding: 0 30upx;
		box-sizing: border-box;
	}

	.potho-item {
		position: relative;
		width: 210upx;
		height: 210upx;
		border-radius: 8upx;
		margin-right: 30upx;
		margin-bottom: 20upx;

		.potho {
			width: 100%;
			height: 100%;
			border-radius: 8upx;
			// background-color: #1ABB1D;
		}
	}

	.addPotho {
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #F7F7F7;
		color: #CCCCCC;
		font-size: 70upx;
		font-weight: 600;
	}

	.potho-item:nth-of-type(3n) {
		margin-right: 0;
	}

	.delete {
		position: absolute;
		width: 48upx;
		height: 48upx;
		right: -18upx;
		top: -18upx;
	}

	.bottom-view {
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		left: 0;
		bottom: 0;
		height: 94upx;
		width: 100%;
		background-color: #fff;

		.commint-btn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 692upx;
			height: 88upx;
			opacity: 1;
			background: linear-gradient(90deg, #00acfe 0%, #0aace0 100%);
			border-radius: 56upx;
			color: #fff;
			font-size: 32upx;
			font-weight: 500;
		}
	}
</style>
